<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 折线图 -->
    <svg width="350" height="160">
      <g class="layer" transform="translate(60,10)">
        <circle r="2" cx="0" cy="105" />
        <circle r="2" cx="90" cy="90" />
        <circle r="2" cx="180" cy="60" />
        <circle r="2" cx="270" cy="0" />

        <polyline points="0,105 90,90 180,60 270,0" fill="none" stroke="red" />

        <g class="y axis">
          <line x1="0" y1="0" x2="0" y2="120" style="stroke: black; stroke-width: 1" />
          <text x="-40" y="115" dy="5">$10</text>
          <text x="-40" y="5" dy="5">$80</text>
        </g>
        <g class="x axis" transform="translate(0, 120)">
          <line x1="0" y1="0" x2="270" y2="0" style="stroke: black; stroke-width: 1" />
          <text x="-10" y="20">Jan.</text>
          <text x="255" y="20">Apr.</text>
        </g>
      </g>
    </svg>
  </body>
</html>
